<template>
  <el-main>
    <!-- // 条件查询 -->
    <el-form v-model="searchModel.departmentName" ref="searchForm" label-width="80px" :inline="true" size="normal">
      <el-form-item label="">
        <el-input v-model="searchModel.departmentName" placeholder="请输入部门名称">输入</el-input>
      </el-form-item>
      <el-form-item label="">
        <el-button size="small" plain @click="search" type="primary">查询</el-button>
        <el-button size="small" plain @click="resetForm" type="info">重置</el-button>
        <el-button plain size="small" plain v-if="hasPermission('sys:department:add')" @click="openAddWindow"
          type="success">新增</el-button>
      </el-form-item>
    </el-form>

    <!-- search end -->
    <!-- table 开始 -->
    <!-- data 表格属性 -->
    <el-table :data="tableData" v-loading="loading" style="width: 100%; margin-bottom: 20px" row-key="id" border stripe
      default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column prop="departmentName" label="部门名称" sortable width="180" align="center">
      </el-table-column>
      <el-table-column prop="parentName" label="所属部门" align="center" sortable width="180">
      </el-table-column>
      <el-table-column prop="phone" label="所属电话" align="center">
      </el-table-column>
      <el-table-column prop="address" label="部门地址" align="center">
      </el-table-column>
      <el-table-column label="菜单" align="center">
        <template slot-scope="scope">
          <!-- <span style="color: #1890FF; cursor: pointer;" @click="handleEdit(scope.row)">编辑 </span> -->
          <el-button size="mini" v-if="hasPermission('sys:department:edit')" @click="handleEdit(scope.row)"
            type="primary">
            编辑
          </el-button>
          <!-- <span style="color: #1890FF; cursor: pointer;" @click="handleDelete(scope.row)">删除</span> -->
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <system-dialog :title="deptDialog.title" :visible="deptDialog.visible" :width="deptDialog.width"
      :height="deptDialog.height" @onClose="onClose" @onConfirm="onConfirm()">
      <div slot="content">
        <el-form :model="dept" ref="deptFormRef" :rules="rules" label-width="80px" :inline="true" size="small">
          <el-form-item prop="parentName" label="所属部门">
            <el-input :readonly="true" @click.native="openSelectDeptWindow" v-model="dept.parentName"
              placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="部门名称" prop="departmentName">
            <el-input v-model="dept.departmentName" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="部门电话">
            <el-input v-model="dept.phone" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="部门地址">
            <el-input v-model="dept.address" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="序号">
            <el-input v-model="dept.orderNum" placeholder=""></el-input>
          </el-form-item>
        </el-form>
      </div>
    </system-dialog>

    <!-- 选择所选部门的窗口 -->
    <system-dialog :title="parentDialog.title" :visible="parentDialog.visible" :width="parentDialog.width"
      :height="parentDialog.height" @onClose="onParentClose" @onConfirm="onParentConfirm">
      <div slot="content">
        <el-tree ref="parentTree" node-key="id" :data="treeList" empty-text="暂无数据" :props="defaultProps"
          @node-click="handleNodeClick" :show-checkbox="false" :highlight-current="true" :default-expand-all="true">
          <!-- <div class="customer-tree-node" slot-scope="{ node, data }"> -->
          <!-- 判断当前节点的子节点长度是否为0 -->
          <!-- <span v-if="data.children.length === 0">
              <i class="el-icon-folder"></i>
            </span>
            <span v-else @click="changeIcon(data)">
              <i class="el-icon-circle-plus-outline" v-if="data.open"></i>
              <i class="el-icon-remove-outline" v-else></i>
            </span>
            <span style="margin-left: 3px">{{ node.label }}</span>
          </div> -->
        </el-tree>
      </div>
    </system-dialog>
  </el-main>
</template>

<script>
  import {
    getDepartmentListApi,
    getParentTreeList,
    addDeptApi,
    editDeptApi,
    checkDepartmentApi,
    deleteByIdApi,
  } from "@/api/department";
  import SystemDialog from "@/components/system/SystemDialog";
  import api from "@/utils/testExport";
  export default {
    components: {
      SystemDialog,
    },
    data() {
      return {
        loading: false,
        dept: {
          id: "",
          departmentName: "",
          parentName: "",
          phone: "",
          address: "",
          orderNum: "",
        },
        searchModel: {
          departmentName: "",
        },
        tableData: [],
        deptDialog: {
          title: "新增部门", // 窗口标题
          width: 560, // 宽
          height: 170, // 高
          visible: false, // 是否显示窗口
        },
        parentDialog: {
          title: "选择所属部门", // 窗口标题
          width: 300, // 宽
          height: 400, // 高
          visible: false, // 是否显示窗口
        },
        rules: {
          parentName: [
            { required: true, message: "请选择所属部门", trigger: "change" },
          ],
          departmentName: [
            { required: true, message: "请输入部门名称", trigger: "change" },
          ],
        },
        // 所属部门列表
        treeList: [],
        defaultProps: {
          children: "children",
          label: "departmentName",
        },
      };
    },
    created() {
      // console.log(api.t1());
      this.search();
    },
    methods: {
      resetForm() {
        this.searchModel.departmentName = "";
        this.search();
      },
      /**
       * 删除按钮
       */
      async handleDelete(row) {
        console.log(row);
        let res = await checkDepartmentApi({ id: row.id });

        if (!res.success) {
          // 存在
          this.$message.warning(res.message);
        } else {
          let confirm = await this.$myconfirm("确定要删除该数据吗？");
          if (confirm) {
            // 发送删除请求
            let res = await deleteByIdApi({ id: row.id });
            if (res.success) {
              this.$message.success("删除成功");
              this.search();
            } else {
              this.$message.error("删除失败");
            }
          }
        }
      },
      /**
       *  编辑按钮
       */
      handleEdit(row) {
        console.log(row);
        this.$objCopy(row, this.dept);
        //   设置窗口的标题
        this.deptDialog.title = "编辑部门";
        this.deptDialog.visible = true;
      },
      /**
       * 改变icon图标 点击树节点 加减号时触发
       */
      changeIcon(data) {
        // 修改折叠的状态
        data.open = !data.open;
        this.$ref.parentTree.store.nodeMap[data.id].expanded = !data.open;
      },
      // 点击树节点触发
      handleNodeClick(data) {
        console.log(data);
        this.dept.pid = data.id;
        this.dept.parentName = data.departmentName;
      },
      // 打开所属部门列表对话框
      async openSelectDeptWindow() {
        this.parentDialog.visible = true;

        // 获取所属部门列表
        let res = await getParentTreeList();
        // 判断是否成功
        if (res.success) {
          console.log(res);
          this.treeList = res.data;
        }
      },
      onParentConfirm() {
        this.parentDialog.visible = false;
      },
      onParentClose() {
        this.parentDialog.visible = false;
      },
      /**
       * 窗口关闭
       */
      onClose() {
        this.$resetForm("deptFormRef", this.dept);

        this.deptDialog.visible = false;
      },
      /**
       *  打开添加窗口
       */
      openAddWindow() {
        this.deptDialog.title = "新增部门";
        this.deptDialog.visible = true;
      },
      /**
       * 新增按钮确认事件
       */
      onConfirm() {
        this.$refs["deptFormRef"].validate(async (valid) => {
          if (valid) {
            // 如果表单验证通过
            if (this.dept.id != "") {
              // 说明id属性有值
              let res = await editDeptApi(this.dept);
              if (res.success) {
                this.$resetForm("deptFormRef", this.dept);
                this.$message.success("修改部门成功");
                this.search();
                this.deptDialog.visible = false;
              } else {
              }
            } else {
              // 新增操作
              let res = await addDeptApi(this.dept);
              if (res.success) {
                this.$resetForm("deptFormRef", this.dept);

                this.$message.success("新增部门成功");
                this.search();
                this.deptDialog.visible = false;
              } else {
                this.$message.error("新增部门失败");
              }
            }
          }
        });
      },
      async search() {
        //   console.log(this.departmentName);
        try {
          this.loading = true;
          let res = await getDepartmentListApi(this.searchModel);
          this.tableData = res.data;
        } catch (e) {
          console.log(e)
        } finally {
          this.loading = false
        }

      },
    },
  };
</script>

<style scoped>
  ::v-deep .has-gutter th {
    background-color: #F2F6FC;
  }
</style>